<template>
  <div>
    <div class="search">
      <el-row>订单编号：
        <el-input
          v-model="searchData.searchONO"
          placeholder="请输入"
          style="width:300px;margin-right:20px"
        />

        订单状态：
        <el-select
          v-model="searchData.searchSTATUS"
          style="width:300px;margin-right:90px"
          clearable
          placeholder="请选择">
          <el-option
            v-for="item in statusoptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>

        <el-button
          type="primary"
          @click="getDeliverydata">查询</el-button>
      </el-row>
    </div>
    <el-table
      ref="singleTable"
      :data="deliveryData">
      <el-table-column
        type="index"
        width="50"
        label="序号"/>
      <el-table-column
        label="订单编号">
        <template slot-scope="scope">
          <span
            style="text-decoration:underline"
            @click="showPrint(scope.row,false,'详情')">{{ scope.row.ONO }}

        </span></template>
      </el-table-column>


      <el-table-column
        property="SHR"
        label="收货人"/>
      <el-table-column
        property="SHRMOBILE"
        label="联系电话"/>
      <el-table-column
        property="SHADDRESS"
        label="收货地址"/>
      <el-table-column
        property="PRESCRIPTION_PRICE"
        label="金额"/>
      <el-table-column
        property="OPENDATE"
        label="日期"/>
      <el-table-column label="发货状态">
        <template slot-scope="scope">
          <span
            v-if="scope.row.ORDSTATUS>3"
            style="color:red">已发货</span>
          <span v-else>未发货</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="showPrint(scope.row,true,'打印')">打印</el-button>
          <el-button
            v-if="scope.row.ORDSTATUS=='3'"
            type="primary"
            size="small"
            @click="doDelivery(scope.row)"
          >发货</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage3"
      :page-size="pagesize"
      :total="total"
      layout="total,prev, pager, next"
      style="text-align:center"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      :visible.sync="fahuo"
      title="订单发货"
      width="45%">
      <el-form>
        <el-form-item
          label="订单信息："
          label-width="100px">
          订单编号：{{ choosedData.ONO }}
          <br>
          收货人：{{ choosedData.SHR }}
          <br>
          联系电话：{{ choosedData.SHRMOBILE }}
          <br>
        </el-form-item>
        <el-form-item
          class="is-required"
          label="快递"
          label-width="100px">
          <el-select
            v-model="mailType"
            placeholder="请选择"
            style="width:100%">
            <el-option
              v-for="item in mailList"
              :key="item.SELECTID"
              :label="item.SELECTNAME"
              :value="item.SELECTID"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="is-required"
          label="快递单号"
          label-width="100px">
          <el-input
            v-model="mailNum"
            type="number"/>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button @click="fahuo = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitDelivery">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dayin"
      :title="showtitle"
      width="45%">
      <div
        id="detail-content"
        style="marin-left:10px">
        <h3 style="text-align:center">{{ ydmc }}</h3>
        <div class="content">
          <div
            class="item delivery-person-info"
            style="border-bottom:1px solid black;margin: 5px 0">
            <div class="item-title">收件人信息</div>
            <table>
              <tr>

                <td style="font-size:40px;width:38%">{{ order.SHR }}</td>
                <td style="font-size:30px">{{ order.SHRMOBILE }}</td>
              </tr>
              <tr>

                <td>收药地址：{{ order.PRIVINCEMC }}&nbsp;{{ order.STREETMC }}&nbsp;{{ order.SHADDRESS }}</td>
                <td/>
              </tr>
            </table>
          </div>
          <div
            class="drug-order"
            style="border-bottom:1px solid black;display:flex;justify-content:space-between">
            <!-- <div style="line-height: 24px;color: #25a4bb;padding-left:10px">订单信息</div> -->
            <table>
              <tbody>
                <tr>
                  <td style="border-top: none;">订单编号：</td>
                  <td style="border-top: none;">{{ order.ORDERCODE }}</td>
                </tr>
                <tr>
                  <td style="border-top: none;">支付交易号：</td>
                  <td style="border-top: none;">{{ order.FSRID }}</td>
                </tr>
                <tr>
                  <td style="border-top: none;">开单时间：</td>
                  <td style="border-top: none;">{{ order.OPENDATE }}</td>
                </tr>
                <tr>
                  <td style="border-top: none;">付款时间：</td>
                  <td style="border-top: none;">{{ order.FKTIME }}</td>
                </tr>
                <tr>
                  <td style="border-top: none;">发货时间：</td>
                  <td style="border-top: none;">{{ order.DELIVERTIME }}</td>
                </tr>
              </tbody>
            </table>
            <div>
              <img
                :src="qrcodeurlsh"
                style="width:100%;">
              <p>(确认收货)</p>
            </div>
          </div>
          <div
            class="item message"
            style="border-bottom:1px solid black;padding:5px;">
            <div class="item-title">患者留言：</div>
            <div class="info">
              <span
                class="msg"
                style="display: block;text-indent: 1.5em;">{{ order.ORDERLEAVEMESSAGE }}</span>
            </div>
          </div>
          <div class="item drug-info">
            <div
              v-if="order.PRESCRIBETYPE=='1'"
              class="drug-list"
              style="width:100%;border-bottom:1px solid black">
              <div class="avatar"><i class="iconfont icon-R"/></div>
              <ul style=" list-style: none;min-height:100px">
                <li
                  v-for="item in drugLists"
                  :key="item.id"
                  style="width:48%;float:left;margin-left:6px;font-size:13px;">{{ item }}</li>
              </ul>
            </div>
            <div
              v-else
              class="drug-list"
              style="width:100%;border-bottom:1px solid black">
              <div class="avatar"><i class="iconfont icon-R"/></div>
              <table>
                <thead>
                  <tr>
                    <th style="width:75%;">品名（规格）</th>
                    <th style="width:15%;">数量</th>
                    <th>金额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item,index) in drugLists"
                    :key="item.id">
                    <td>{{ index+1 }}.{{ item.split('#')[2] }}</td>
                    <td>{{ item.split('#')[5] }}</td>
                    <td>{{ item.split('#')[3] }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="drug-usage"
              style="border-bottom:1px dotted black;margin: 10px 0">
              <div class="drug-title">医嘱：</div>
              <div
                class="text"
                style="display: block;text-indent: 1.5em;">{{ order.YFYL }} </div>
            </div>
            <div
              class="drug-service"
              style="border-bottom: 2px dashed black;line-height: 30px;margin-bottom: 10px;">
              <div class="drug-title">费用
                <table style="margin-left: 10px;">
                  <tr>
                    <td>
                      总计：{{ order.TOTALPRICE }}元=药费{{ order.PRESCRIBEUNITPRICE }}元+配送费{{ order.PSF }}元+加工费{{ order.JGF }}元
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div
              class="drug-order"
              style="display:flex;justify-content:space-between">
              <table>
                <tr><td>订单编号：</td><td>{{ order.OID }}</td></tr>
                <tr><td>药剂师：</td><td>{{ username }}</td></tr>
                <tr><td>时间：</td><td>{{ currentDate }}</td></tr>
              </table>
            </div>
          </div>
        </div>
        <div
          v-if="isshow"
          slot="footer"
          class="dialog-footer">
          <el-button @click="dayin = false">取 消</el-button>
          <el-button
            type="primary"
            @click="goPrint">确 定</el-button>
        </div>
        <div
          v-else
          slot="footer"
          class="dialog-footer">
          <el-button @click="dayin = false">返回</el-button>
        </div>
    </div></el-dialog>
  </div>
</template>

<script>
import qrcode from '~/components/common/qrcode.vue'

export default {
  components: {
    qrcode
  },
  data() {
    return {
      ts: this.newStore(),
      ydmc: sessionStorage.getItem('ydmc'),
      username: sessionStorage.getItem('username'),
      currentPage3: 1,
      pagesize: 10,
      total: 0,
      dayin: false,
      fahuo: false,
      mailList: [],
      deliveryData: [],
      choosedData: {},
      isshow: false,
      showtitle: '',
      searchData: {
        searchSTATUS: '',
        searchSHR: '',
        searchONO: '',
        searchTEL: ''
      },
      mailType: '',
      mailNum: '',
      statusoptions: [
        {
          name: '未发货',
          value: '3'
        },
        {
          name: '已发货,待收',
          value: '4'
        },
        {
          name: '已发货,已收',
          value: '5'
        }
      ],
      qrcodeurlsh: '',
      qrcodeurlxq: '',
      order: {},
      drugLists: []
    }
  },

  computed: {
    currentDate() {
      const date = new Date()
      let str = ''
      const Year = date.getUTCFullYear()
      const Month =
        date.getMonth() <= 9 ? `0${date.getMonth() + 1}` : date.getMonth()
      const RQ = date.getDate() <= 9 ? `0${date.getDate()}` : date.getDate()
      const Hour =
        date.getHours() <= 9 ? `0${date.getHours()}` : date.getHours()
      const Minute =
        date.getMinutes() <= 9 ? `0${date.getMinutes()}` : date.getMinutes()
      const Second =
        date.getSeconds() <= 9 ? `0${date.getSeconds()}` : date.getSeconds()
      str = `${Year}-${Month}-${RQ} ${Hour}:${Minute}:${Second}`
      return str
    }
  },
  created() {
    this.getDeliverydata()
    this.getKuaidi()
  },
  methods: {
    iskdfw(row, column) {
      return row.KDFW === '' ? '是' : '否'
    },
    // 点击打印按钮，进入订单详情页,若在当页，进行打印
    goPrint() {
      this.$nextTick(() => {
        const detailContent = document.getElementById('detail-content')
        Print(detailContent)
      })
    },
    showPrint(item, isshow, showtitle) {
      //this.getQrCode(item)

      this.order = item
      this.drugLists = item.DURGSLIST.split(',')
      this.drugLists.forEach(el => {
        this.sum1 += Number(el.split('#')[3])
      })
      this.fujia_list = JSON.parse(item.ACSM)

      this.dayin = true
      this.isshow = isshow
      this.showtitle = showtitle
    },

    getQrCode(item) {
      console.log(oid)
      // alert(`调用获取二维码接口： ${oid}`);
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.04.18',
          CLIENTID: 'YLAPP',
          // "RYBID": "DOCTOR",
          RYBID: 'YF',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            oid: item.ORDERID
          }
        }
      })
      console.log(req)
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req
      }).then(ts => {
        if (ts.d.RESULT == '200') {
          this.qrcodeurlsh = ts.d.DATAOBJ.DATA.qrcodeurlsh // 收货二维码路径
          this.qrcodeurlxq = ts.d.DATAOBJ.DATA.qrcodeurlxq // 查看详情二维码路径
        } else {
          this.$message.error(
            `获取收货二维码、查看详情二维码失败 : ${ts.d.RESULTTEXT}`
          )
        }
      })
    },
    submitDelivery() {
      if (this.mailType == '') {
        this.$message.error('请选择快递')
        return
      }
      if (this.mailNum == '') {
        this.$message.error('请填写快递单号')
        return
      }
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.04.16',
          CLIENTID: 'YLAPP',
          RYBID: 'YF',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            orderId: this.choosedData.ORDERID,
            kdno: this.mailNum,
            selectid: this.mailType
          }
        }
      })
      this.$confirm('确认发货, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.spost(this.ts, '/doctor/AppMainServlet.ap', {
            '': req
          }).then(() => {
            this.$message({
              type: 'success',
              message: '发货成功!'
            })
            this.getDeliverydata()
            this.fahuo = false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleCurrentChange(val) {
      this.getDeliverydata()
    },
    doDelivery(item) {
      this.choosedData = item
      console.log(item)

      this.fahuo = true
    },
    getKuaidi() {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.04.19',
          CLIENTID: 'YLAPP',
          RYBID: 'YF',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: { itemid: '0001' }
        }
      })
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req
      }).then(ts => {
        this.mailList = ts.d.DATAOBJ.DATA
      })
    },
    getDeliverydata() {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.04.10',
          CLIENTID: 'YLAPP',
          // "RYBID": "DOCTOR",
          RYBID: 'YF',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            deliveryType: 'delivery',
            ordercolumn: 'opentime',
            ordertype: 'desc',

            searchONO: this.searchData.searchONO,
            searchSTATUS: this.searchData.searchSTATUS,
            rowsperpage: this.pagesize + '',
            page: this.currentPage3 + ''
          }
        }
      })
      console.log(req)
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req
      }).then(ts => {
        this.deliveryData = ts.d.DATAOBJ.DATA

        this.total = Number(ts.d.DATAOBJ.TOTAL)
      })
    }
  }
}
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.search {
  margin-bottom: 10px;
  width: 100%;
}

.detail-container {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;

  ul {
    list-style: none;
    padding-left: 10px;
    margin-bottom: 0;
  }

  .detail-text-container {
    position: absolute;
    left: 50%;
    top: 10px;
    margin-left: -188px;
    width: 570px;
    min-height: 500px;
    background-color: #fff;

    .detail-main {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      &::-moz-scrollbar {
        display: none;
      }

      #detail-content {
        .content {
          font-size: 14px;

          .item {
            padding: 0 10px;
            border-bottom: 1px solid #ccc;

            &:nth-last-child(1) {
              border-bottom: none;
              margin-bottom: 5px;
            }

            .item-title {
              line-height: 24px;
              color: #25a4bb;
            }

            .info {
              display: flex;

              .item-info {
                flex: 1;

                &:nth-of-type(1) {
                  flex: 0 0 30px;
                  color: #25a4bb;
                }

                &:nth-of-type(3) {
                  flex: 0 0 80px;
                }

                p {
                  margin: 0;
                  line-height: 20px;

                  span {
                    font-weight: 500;
                  }
                }
              }
            }

            &.message {
              span {
                text-indent: 1.5em;
              }
            }

            &.drug-info {
              position: relative;

              .table {
                td {
                  padding: 0 0 0 10px;
                  border-top: none;

                  &:nth-of-type(1) {
                    width: 80px;
                  }
                }
              }

              .drug-list {
                ul {
                  overflow: auto;

                  li {
                    width: 45%;
                    float: left;
                  }
                }

                .icon-R {
                  color: #25a4bb;
                }
              }

              .drug-usage, .drug-service, .drug-cost, .drug-order {
                .drug-title {
                  color: #25a4bb;
                }

                p {
                  margin: 0;
                }
              }

              .drug-usage {
                .text {
                  margin-right: 20px;
                  text-indent: 1em;
                }
              }

              .drug-cost {
                .table {
                  margin: 0;

                  td {
                    padding: 0 0 0 10px;
                    border-top: none;

                    &:nth-of-type(1) {
                      width: 80px;
                    }
                  }
                }
              }

              .drug-order {
                .table {
                  margin: 0;

                  tr {
                    td {
                      padding: 0 0 0 10px;
                      border-top: none;

                      &:nth-of-type(1) {
                        width: 100px;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .print-info {
          font-size: 14px;
          position: absolute;
          bottom: -50px;
          left: 20px;
        }

        p {
          margin: 0;
        }

        .barcode-wrapper {
          margin-left: -10px;
        }
      }

      .invoice {
        .content {
          .table {
            tr {
              td {
                &:nth-of-type(2) {
                  font-size: 14px;
                }

                input {
                  border: 0 none;
                  outline: 0 none;
                  border: 1px solid #ccc;
                  padding: 3px 0 3px 5px;
                  width: 200px;
                }

                .info {
                  padding-left: 10px;
                  font-size: 12px;

                  .iconfont {
                    margin-right: 5px;
                    font-size: 16px;

                    &.icon-tishishuoming {
                      font-size: 14px;
                    }
                  }

                  &.fail {
                    color: #e4393c;
                  }

                  &.pass {
                    color: #0c0;
                  }
                }

                .send {
                  width: 200px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  background: #25a4bb;
                  color: #fff;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }

    .detail-tab {
      position: absolute;
      bottom: -50px;
      display: flex;
      width: 570px;
      height: 50px;
      line-height: 50px;

      .item {
        flex: 1;
        text-align: center;
        background: #ccc;
        color: #333;
        cursor: pointer;

        &:nth-of-type(1) {
          border-right: 1px solid #fff;
        }

        &.active {
          background: #25a4bb;
          color: #fff;
        }
      }
    }
  }
}
</style>
